<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合展示页面</title>
    <style>
        /* 导航栏样式 */
       .navbar {
            width: 1300px;
            height: 60px;
            background-color: #D7719B;
            display: flex;
            justify-content: flex-end;
            margin: 0 auto;
        }

        /* 导航区域样式 */
       .nav-area {
            width: 500px;
            height: 60px;
            display: flex;
        }

        /* 导航菜单项样式 */
       .nav-item {
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
        }

        /* 导航链接样式 */
       .nav-item a {
            color: white;
            font-size: 24px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标悬停时菜单项样式 */
       .nav-item a:hover {
            background-color: orange;
        }

        /* 页面头部元素样式，也就是首页样式 */
       .page-header {
            width: 1300px;
            height: 700px;
            margin: 0 auto 30px;
            background-image: url('your-background-image.jpg');
            background-size: cover;
            background-position: center;
        }

        /* 个人写真页面样式，默认隐藏 */
       .personal-photos {
            display: none;
            width: 1300px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        /* 照片卡片样式 */
       .photo-card {
            width: 380px;
            height: 500px;
            background-color: white;
            border: 1px solid gray;
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        /* 照片样式 */
       .photo-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        /* 我的基本信息页面样式，默认隐藏 */
       .basic-info-page {
            display: none;
            text-align: center;
        }

       .basic-info-page img {
            width: 1300px;
            height: 700px;
            margin: 0 auto;
        }

        /* 其他页面样式，默认隐藏 */
       .other-page {
            display: none;
            text-align: center;
            font-family: 宋体;
            font-size: 24px;
            padding-top: 200px;
        }

        /* 自我介绍页面样式，默认隐藏 */
       .self-intro-page {
            display: none;
            width: 1300px;
            margin: 0 auto;
            font-size: 18px;
            line-height: 1.6;
            text-align: center;
        }

       .self-intro-page p:first-child {
            font-size: 21px; /* 原字体大小 18px + 3px */
            font-weight: bold;
            margin-bottom: 5px; /* 增加第一句与第二句的间距 */
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-area">
            <div class="nav-item">
                <a href="#" onclick="showPage('home'); return false;">首页</a>
            </div>
            <div class="nav-item">
                <a href="#" onclick="showPage('basic-info-page'); return false;">我的信息</a>
            </div>
            <div class="nav-item">
                <a href="#" onclick="showPage('self-intro-page'); return false;">自我介绍</a>
            </div>
            <div class="nav-item">
                <a href="#" onclick="showPage('personal-photos'); return false;">个人写真</a>
            </div>
            <div class="nav-item">
                <a href="#" onclick="showPage('other-page'); return false;">其他</a>
            </div>
        </div>
    </nav>

    <!-- 页面头部元素，作为首页展示 -->
    <header class="page-header" id="home"></header>

    <!-- 个人写真页面 -->
    <div class="personal-photos" id="personal-photos">
        <div class="photo-card">
            <img src="photo1.jpg" alt="写真 1">
        </div>
        <div class="photo-card">
            <img src="photo2.jpg" alt="写真 2">
        </div>
        <div class="photo-card">
            <img src="photo3.jpg" alt="写真 3">
        </div>
        <div class="photo-card">
            <img src="photo4.jpg" alt="写真 4">
        </div>
        <div class="photo-card">
            <img src="photo5.jpg" alt="写真 5">
        </div>
        <div class="photo-card">
            <img src="photo6.jpg" alt="写真 6">
        </div>
    </div>

    <!-- 我的基本信息页面 -->
    <div class="basic-info-page" id="basic-info-page">
        <img src="your-basic-info-image.jpg" alt="基本信息图片">
    </div>

    <!-- 自我介绍页面 -->
    <div class="self-intro-page" id="self-intro-page">
        <p>我，在大学的坐标里</p>
        <p>嘿，世界！我是时焱</p>
        <p>初入大学，像只雏鸟闯进新林</p>
        <p>来自河南，那儿的山水是我的底色</p>
        <p>乡音里藏着童年的歌谣，岁月的辙印</p>
        <p></p>
        <p>课堂是我求知的战场</p>
        <p>在知识的洪流里奋力划桨</p>
        <p>从文学名著到数理方程</p>
        <p>每一页笔记都是成长的注脚</p>
        <p></p>
        <p>社团招新的海报点燃我的热情</p>
        <p>舞台上虽青涩却满怀憧憬</p>
        <p>和伙伴们熬夜筹备活动</p>
        <p>疲惫中是滚烫的友情</p>
        <p></p>
        <p>我也会在操场的角落发呆</p>
        <p>思考未来，像探索未知的海</p>
        <p>在迷茫的雾霭里找寻灯塔</p>
        <p>梦想的轮廓在心中慢慢晕开</p>
        <p></p>
        <p>我是平凡的大学生</p>
        <p>也是独一无二的存在</p>
        <p>在大学的坐标里</p>
        <p>书写属于自己的色彩</p>
    </div>

    <!-- 其他页面 -->
    <div class="other-page" id="other-page">
        <p>你还想看什么，还不够吗施主</p>
    </div>

    <script>
        function showPage(pageId) {
            const pages = ['home', 'personal-photos', 'basic-info-page', 'self-intro-page', 'other-page'];
            pages.forEach(id => {
                const page = document.getElementById(id);
                if (id === pageId) {
                    page.style.display = 'block';
                    if (id === 'personal-photos') {
                        page.style.display = 'flex';
                    }
                } else {
                    page.style.display = 'none';
                }
            });
        }

        // 获取所有导航链接
        const navLinks = document.querySelectorAll('.nav-item a');

        // 为每个导航链接添加点击事件监听器
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (!href.startsWith('#')) {
                link.addEventListener('click', function (event) {
                    event.preventDefault();
                    alert(`你点击了：${this.textContent}`);
                });
            }
        });
    </script>
</body>

</html>